<toaster-container></toaster-container>
<div class="row mb-2">
    <a href="javascript:;" class="text-link" [routerLink]="['../../']">
        <i class="ti-arrow-left"></i> Back to News
    </a>
</div>
<div class="row mt-2">
    <div *ngIf="spotlight" class="col-md-5">
        <h3>
            <span *ngIf="edit == 'false'">Add</span>
            <span *ngIf="edit == 'true' && canEdit">Edit</span>
            <span *ngIf="edit == 'true' && !canEdit">Details Of</span>            
            News Item
        </h3>
        <select [(ngModel)]="spotlight.category" class="form-control mb-2" [disabled]="!canEdit">
            <option [ngValue]="null">News Category</option>
            <option *ngFor="let category of categories | enumToArray" [ngValue]="categories[category]">{{category}}</option>
        </select>
        <dl>
            <dt>Article Title*</dt>
            <dd>
                <input *ngIf="canEdit" [(ngModel)]="spotlight.title" class="form-control">
                <span *ngIf="!canEdit">{{spotlight.title}}</span>
            </dd>
            <dt>Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="spotlight.dateCreated">
                </div>
                <span *ngIf="!canEdit">{{spotlight.dateCreated | date: 'dd-MM-yyy'}}</span>
            </dd>
            <dt>Tags*</dt>
            <dd>                
                <tag-input [(ngModel)]='spotlight.tags' theme="minimal" [disable]="!canEdit"></tag-input>
            </dd>
            <dt>Region*</dt>
            <dd>
                <select *ngIf="canEdit" [(ngModel)]="spotlight.region" class="form-control mb-2">
                    <option *ngFor="let region of regions | enumToArray" [ngValue]="regions[region]">{{region}}</option>
                </select>
                <span *ngIf="!canEdit">{{regions[spotlight.region]}}</span>
            </dd>
            <dt>Unpublished Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="spotlight.unpublishedDate">
                </div>
                <span *ngIf="!canEdit">{{spotlight.unpublishedDate | date: 'dd-MM-yyy'}}</span>
            </dd>
            <dt>Available for</dt>
            <dd>
                <div class="row">
                    <div *ngFor="let available of availability | enumToArray" class="col-md-4">
                        {{available}}
                    </div>
                </div>
                <div class="row">
                    <div *ngFor="let available of availability | enumToArray" class="col-md-4">
                        <ui-switch size="small" [checked]="spotlight.availableFor == availability[available]" (change)="changeAvailability(availability[available])"
                            [disabled]="!canEdit || spotlight.availableFor == availability[available]"></ui-switch>
                    </div>
                </div>
            </dd>
        </dl>
        <div *ngIf="canEdit" class="row mt-2">
            <button class="btn btn-primary-dark" (click)="publishSpotlight()">
                Publish
            </button>
            <button class="btn btn-primary-dark ml-1" (click)="saveSpotlight()">
                Save as Draft
            </button>
        </div>
    </div>
    <div class="col-md-7">
        <h5>Body of Article</h5>
        <quill-editor *ngIf="spotlight" [modules]="quillOptions" [(ngModel)]="spotlight.body" [readOnly]="!canEdit"></quill-editor>
    </div>
</div>